<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <template>
      <div class="bread">
        <div class="container">
          <span class="text fl"> 您的当前位置：</span>
          <el-breadcrumb class="fl" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/hotteamlist' }">热门团队</el-breadcrumb-item>
            <el-breadcrumb-item>{{detailinfo.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </template>

    <!-- 详情 -->
    <div class="show_team">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="over">
              <img :src="$api + detailinfo.image" class="w100 hei_a" alt="" />
            </div>
          </div>
          <div class="col-md-6 right">
            <div>
              <div class="name">
                {{detailinfo.name}}
              </div>
              <ul class="clearfix huodong">
                <li class="clearfix">
                  <div class="fl">
                    <div
                      class="img"
                      :style="{
                    backgroundImage: 'url(' + $api + detailinfo.user.avatar + ')',
			}"
                    ></div>
                  </div>
                  <div class="fr">
                    <div>
                      <div>团队创建人</div>
                      <div>{{ detailinfo.user.nickname }}</div>
                    </div>
                  </div>
                </li>

              </ul>
              <div class="price clearfix">
                <div class="fl text m0">
                  团队成员：{{detailinfo.join_num}}人<br />
                  举办活动：{{detailinfo.activity_num}}场
                </div>
                <div class="fr">
                  <i class="iconfont icon-yanjing"></i> {{detailinfo.views}}
                  <!-- <a href=""><i class="iconfont icon-fenxiang"></i></a> -->
                </div>
              </div>

              <div
                class="more ma ib shenqing"
                v-show="show"
                v-if="detailinfo.is_join == 1"
              >
                <a href="javascript:;">已参加</a>
              </div>
              <div
                class="more ma ib shenqing"
                @click="clickpar()"
                v-show="show"
                v-else
              >
                <a href="javascript:;">我要参加</a>
              </div>

              <div class="more ma shoucang shoucang1" v-if="detailinfo.is_collect == 1">
                <a href="javascript:;" @click="unCollect()"><i class="iconfont icon-kongwujiaoxing"></i>取消收藏（{{detailinfo.collect_num}}）</a>
              </div>
              <div class="more ma shoucang shoucang1" v-else>
                <a href="javascript:;" @click="addCollect()"><i class="iconfont icon-kongwujiaoxing"></i>收藏（{{detailinfo.collect_num}}）</a>
              </div>

            </div>
          </div>
        </div>
        <div class="join_active">
          <div class="ny_title">申请加入该组织，请填写您的基本信息</div>
    <el-form
      :model="ruleForm"
      :rules="ruleFormRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm mt20"
    >
            <div class="row">
              <div class="col-md-3">
                <div class="text"><span>*</span>真实姓名</div>
                <div class="input">
		<input v-model="ruleForm.name" required ></input>
		</div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>手机号</div>
                <div class="input"><input v-model="ruleForm.phone" prop="phone" required ></input></div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>电子邮箱</div>
                <div class="input"><input v-model="ruleForm.email" prop="email" required ></input></div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>性别</div>
                <div class="input clearfix">
                  <div class="radio fl">
                    <input id="man" name="sex" type="radio" v-model='ruleForm.sex' value="1" checked required />
                    <label for="man" class="radio-label">男</label>
                  </div>

                  <div class="radio fl">
                    <input id="woman" name="sex" type="radio" v-model='ruleForm.sex' value="2" required />
                    <label for="woman" class="radio-label">女</label>
                  </div>

                </div>
              </div>
              <div class="col-md-12">
                <div class="text"><span>*</span>所在城市</div>
                <div class="input">
                  <!-- <input v-model="ruleForm.city" prop="city" required ></input> -->
                  <vCity ref="getConCity" :setCity="请选择"></vCity>
                  </div>
              </div>

              <div class="col-md-12 agree">
                <input type="checkbox" v-model="ruleForm.agree" prop="agree" value="1" required ></input>我已阅读并同意<router-link to="/yhzcxy">《Jujuamici用户注册协议》</router-link>
              </div>
            </div>

		<el-button @click="handleSubmit">提交</el-button>
            <button class="quxiao quxiao2" @click="unclickpar()">取消</button>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 切换 -->
    <div class="show_team_three bf show_team_qiehuan">
      <div class="container">
        <div class="shaixuan">
          <ul class="clearfix">
            <li @click="hot = 0" :class="{ active: hot === 0 }">
              <a href="javascript:;">关于我们</a>
            </li>
            <li @click="hot = 1" :class="{ active: hot === 1 }">
              <a href="javascript:;">举办活动</a>
            </li>
            <li @click="hot = 2" :class="{ active: hot === 2 }" v-if="detailinfo.is_userpub == 1">
              <a href="javascript:;">团队成员</a>
            </li>
            <li @click="hot = 3" :class="{ active: hot === 3 }">
              <a href="javascript:;">有趣的故事</a>
            </li>
          </ul>
        </div>
        <div class="sum">
          <!-- 关于我们 -->
          <div class="text" v-show="hot === 0" v-html="detailinfo.content">
          </div>
          <!-- 举办活动 -->
          <div v-show="hot === 1">
            <div class="ta mb45">
              <div class="jiansuo" v-if="activityPage_all.total > 0">
                <form action="">
                  <div class="pr">
                    <input type="text" v-model="keyword" placeholder="检索以往活动" />
		    <el-button type="primary" class="primary padding" @click.native="defaultSearch()">查询</el-button>
                  </div>
                </form>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 activity mb30"
                   v-for="(neirong, d) in this.activityList"
                   :key="d"
              >
                <div class="pr">
                  <div
                    class="zhuangtai"
                    style="background: url(../../img/img/jxz.png)"
                  ></div>
                  <router-link :to="{path:'/hotshow',query:{id:neirong.id}}" class="bl over"
                  ><img :src="$api + neirong.image" class="w100" alt=""
                  /></router-link>
                  <div class="content">
                    <div class="data">活动时间：{{ neirong.create_time | formatDate }}</div>
                    <router-link :to="{path:'/hotshow',query:{id:neirong.id}}" class="bl name line1"
                    >{{ neirong.title }}
                    </router-link>
                    <div class="address text">
                      <i class="iconfont icon-dizhi"></i>{{ neirong.city }}
                    </div>
                    <div class="people clearfix">
                      <div class="fl clearfix">
                        <div
                          class="tx_img"
                          :style="{
                          backgroundImage:
                            'url(' + $api + neirong.user.avatar + ')',
                        }"
                        ></div>
                        <div>{{ neirong.user.nickname }}</div>
                      </div>
                      <div class="fr">
                        <i class="iconfont icon-yanjing"></i> {{ neirong.views }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty description="暂无数据" v-if="activityPage.total == 0"></el-empty>

            </div>
          </div>
          <!-- 团队成员 -->
          <div v-show="hot === 2 &&  detailinfo.is_userpub == 1">
            <div class="ta mb45">
              <div class="jiansuo"  v-if="teamuserPage_all.total > 0">
                <form action="">
                  <div class="pr">
                    <input type="text" v-model="keywordteam" placeholder="检索会员" />
		    <el-button type="primary" class="primary padding" @click.native="defaultTeamSearch()">查询</el-button>
                  </div>
                </form>
              </div>
            </div>

            <div class="canyuzhe">
              <ul class="clearfix">
                <li class="ta"
              v-for="(neirong, d) in this.teamuserList"
              :key="d"
		>
                  <div class="img">
                    <div
                      :style="{
                        backgroundImage: 'url(' + $api + neirong.user.avatar + ')',
                      }"
                    ></div>
                  </div>
                  <div class="content">
                    <div class="name">{{ neirong.user.nickname }}</div>
                    <div class="job">{{ neirong.role_name }}</div>
                  </div>
                </li>

              </ul>
            </div>
            <el-empty description="暂无数据" v-if="teamuserPage.total == 0"></el-empty>
          </div>
          <!-- 有趣的故事 -->
          <div v-show="hot === 3">
            <ul class="clearfix story_ul row">
              <li class="col-md-6"
                  v-for="(item, index) in this.storyList"
                  :key="index"

              >
                <div class="clearfix">
                  <router-link :to="{path:'/stroyshow',query:{id:item.id} }" class="fl left bl">
                    <div
                      class="img"
                      :style="{
                    backgroundImage: 'url(' + $api + item.image + ')',
                  }"
                    ></div>
                  </router-link>

                  <div class="fr right">
                    <div class="clearfix data">
                      <div class="fl">{{ item.create_time | formatDate }}</div>
                      <div class="fr">
                        <i class="iconfont icon-yanjing"></i>{{ item.views }}
                      </div>
                    </div>
                    <!-- :to="{ path: item.url }"  -->
                    <router-link :to="{path:'/stroyshow',query:{id:item.id} }" class="bl name line2">{{
                        item.title
                      }}</router-link>
                    <div class="text line2" v-html="item.content">
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <el-empty description="暂无数据" v-if="storyPage.total == 0"></el-empty>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBread from "../../websitecom/Bread.vue";
import { formatDate } from "../../assets/data.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import vCity from "../../components/City.vue";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
    vCity,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      swiperIndex: {
        slidesPerColumnFill: "row",
        slidesPerView: 4,
        spaceBetween: 26,
        slidesPerColumn: 2,
        observer: true,
        observeParents: true,
        breakpoints: {
          990: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          767: {
            slidesPerView: 1,
            spaceBetween: 15,
            slidesPerColumn: 1,
            pagination: {
              el: ".index_two .swiper-pagination",
              clickable: true,
            },
          },
        },
      },
      hot: 0,
      show: true,
      id: this.$route.params.id,
      detailinfo: {},
      teamuserList: {},
      teamuserPage: {},
      teamuserPage_all: {},
      activityList: {},
      activityPage: {},
      activityPage_all: {},
      storyList: {},
      storyPage: {},
      token: '',
      keyword: '',
      keywordteam: '',
      ruleForm: [],
      ruleFormRules: {
        name: [
          {
            type: "string",
            required: true,
            message: "真实姓名必填",
            trigger: "blur",
          },{ min:2, message: "长度最少2位" }
        ],
        phone: [
          {
            type: "string",
            required: true,
            message: "手机必填",
            trigger: "blur",
          },{ min:13, message: "长度最少13位" }
        ],
        email: [
          {
            type: "string",
            required: true,
            message: "邮箱必填",
            trigger: "blur",
          },{ min:10, message: "长度最少10位" }
        ],
      },
      options: regionData,
      selectedOptions: [],
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
    this.getteamuserList();
    this.getactivityList();
    this.getstoryList();
    this.getUserInfo();
  },
  methods: {
    handleChange(value) {
      //console.log(value);
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      ////console.log(provinceCode)
      ////console.log(cityCode)
      ////console.log(orgion)
      this.ruleForm.city = [value[0], value[1], value[2]];
      this.ruleForm.city_text = provinceCode + "/" + cityCode + "/" + orgion;
    },
    clickpar: function () {
      $(".join_active").slideDown();
      this.show = !this.show;
    },
    unclickpar: function () {
      $(".join_active").slideUp();
      this.show = !this.show;
      $('.shenqing').show();
    },


    getDetails() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/team/detail?id=" + this.id
        )
        .then(function (response) {
        that.detailinfo = response.data.data;
          document.title = response.data.data.name + '-聚聚阿米奇';
          //console.log(this.detailinfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getteamuserList(type) {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/team/teamuser?team_id="+this.id+"&nickname="+this.keywordteam
        )
        .then(function (response) {
          that.teamuserList = response.data.data.data;
          that.teamuserPage = response.data.data;
          if(!type){
            that.teamuserPage_all = response.data.data;
          }
          //console.log('team list',that.teamuserList);
          //console.log('team teamuserPage',that.teamuserPage);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getactivityList(type) {
      var that = this;
      this.$axios
        .get(
          this.$api +
          "//api/activity/index?page_no=1&page_size=10&sort=id,start_date,join_num&order=asc&search=title:"+this.keyword+";type:;start_time:;end_time:;city:;is_free:;team_id:"+this.id+";is_end:;"
        )
        .then(function (response) {
          that.activityList = response.data.data.data;
          that.activityPage = response.data.data.page;
          if(!type){
            that.activityPage_all = response.data.data.page;
          }
          //console.log('activity list',that.activityList);
          //console.log('activity activityPage',that.activityPage);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getstoryList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
          "//api/story/index?page_no=1&page_size=10&sort=weigh,create_time,views&order=asc&search=title:;type:;team_id:"+this.id+";"
        )
        .then(function (response) {
          that.storyList = response.data.data.data;
          that.storyPage = response.data.data.page;
          //console.log('story list',that.storyList);
          //console.log('story storyPage',that.storyPage);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
        //提交
    handleSubmit() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm);

            if (!this.ruleForm.name) {
              this.$message.error('请输入姓名');
              return false;
            }

            if (this.ruleForm.phone.length != 11) {
              this.$message.error('手机长度不对');
              return false;
            }

            var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!reg.test(this.ruleForm.phone)) {
              this.$message.error("请输入正确的手机号");
              return false;
            }

            if (!this.ruleForm.email) {
              this.$message.error('请输入邮箱');
              return false;
            }

            if (
              !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
                this.ruleForm.email
              )
            ) {
              this.$message.error("邮箱格式不正确");
              return;
            }

            if (!this.ruleForm.sex) {
              this.$message.error('请选择性别');
              return false;
            }

            if (!this.$refs["getConCity"].city) {
              this.$message.error('请输入所在城市');
              return false;
            }

            if (!this.ruleForm.agree) {
              this.$message.error("用户注册协议必填");
              return false;
            }

            var url = this.$api + "/api/teamapply/add";
            var jsons = {
              team_id: this.id,
              name: this.ruleForm.name,
              phone: this.ruleForm.phone,
              email: this.ruleForm.email,
              sex: this.ruleForm.sex,
              city: this.$refs["getConCity"].city,
              remark: ''
            };

            var that = this;
            this.$axios
              .post(url, jsons)
              .then((res) => {
                //console.log(res);
                if (res.data.code == 1) {
                  that.$message({
                    message: '提交成功，请等待审核',
                    type: "success",
                  });
                  location.reload();
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                ////console.log('error', Error);
                that.$message.error('请先登录！');
              });

          }
        });
      })

    },
    addCollect(){
      this.token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '';
      if(!this.token){
        this.$message.error('请先登录！');
        return false;
      }

      //定义一个json示例
      var jsons={
        collect_id:this.id,
        collect_type:'team'
      }
      var that = this;

      this.$axios.post(this.$api + "/api/collect/collect",jsons)
        .then(res=>{
          //console.log(res.data);
          if(res.data.code == 1){
            that.$message({
              message: res.data.msg,
              type: 'success'
            });
	    location.reload();
          }else{
            that.$message.error(res.data.msg);
          }
        })
        .catch(Error=>{
          //console.log(Error)
        })
    },
    unCollect(){
      this.token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '';
      if(!this.token){
        this.$message.error('请先登录！');
        return false;
      }

      //定义一个json示例
      var jsons={
        collect_id:this.id,
        collect_type:'team'
      }
      var that = this;

      this.$axios.post(this.$api + "/api/collect/delete",jsons)
        .then(res=>{
          //console.log(res.data);
          if(res.data.code == 1){
            that.$message({
              message: res.data.msg,
              type: 'success'
            });
	    location.reload();
          }else{
            that.$message.error(res.data.msg);
          }
        })
        .catch(Error=>{
          //console.log(Error)
        })
    },
    defaultSearch() {
      //console.log(this.keyword);
      this.getactivityList(1);
    },
    defaultTeamSearch() {
      //console.log(this.keywordteam);
      this.getteamuserList(1);
    },
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          var user = response.data.data;
          //console.log("infoNum1111", user);
          that.ruleForm.name = user.name;
          that.ruleForm.phone = user.mobile;
          that.ruleForm.email = user.email;
          //that.ruleForm.sex = user.sex;

          //城市分开
          var tcity = user.city;
          that.ruleForm.city_text = user.city;
          var tcity = tcity.split("/");
          var code1 = TextToCode[tcity[0]].code;
          var code2 = TextToCode[tcity[0]][tcity[1]].code;
          var code3 = TextToCode[tcity[0]][tcity[1]][tcity[2]].code;
          that.ruleForm.city = [code1, code2, code3];
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
   created() {
    this.getDetails();
  }
};
</script>

<style lang="less" scoped>
.join_active button {
  padding: 0;
  font-size: 1rem;
}
.hei_a {
   height: 25.9375rem;
  object-fit: cover;
 }
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.primary.padding{
  padding: 0;
}
.show_team {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}
.show_team {
  .right {
    .name {
      font-size: 1.125rem;
      line-height: 3.125rem;
      color: #000000;
    }

    .huodong {
      border-top: 1px solid #dfdfdf;
      padding: 1.375rem 0 1.5rem;

      li {
        padding: 0.6875rem 0.8125rem;
        background-color: #eceff4;
        margin-right: 0.75rem;
        display: inline-block;

        .fl {
          .img {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 3px;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-color: #eceff4 !important;
            border-radius: 50%;
          }

          margin-right: 0.6875rem;
        }

        .fr {
          height: 3.125rem;
          display: table-cell;

          > div {
            display: table-cell;
            vertical-align: middle;
            height: 3.125rem;

            > div:nth-child(1) {
              font-size: 0.875rem;
              line-height: 1.5rem;
              color: #848484;
            }

            > div:nth-child(2) {
              font-size: 1rem;
              line-height: 1.875rem;
              color: #000000;
            }
          }
        }
      }
    }

    .price {
      font-size: 1rem;
      line-height: 1.875rem;
      color: #000000;
      margin-bottom: 1.5rem;

      span {
        color: #4c8bf5;
        font-size: 1.25rem;
        display: inline-block;
        margin-left: 0.625rem;
      }

      .fr {
        color: #848484;

        a {
          i {
            font-size: 1.125rem;
            margin-left: 1.25rem;
          }
        }
      }
    }
  }
}
.join_active {
  padding-top: 2.8125rem;
  display: none;

  .ny_title::before {
    width: 4rem;
  }

  input {
    width: 100%;
    height: 3.25rem;
    line-height: 3.125rem;
    border-radius: 0.3125rem;
    padding: 0 1.25rem;
    border: solid 1px #dfdfdf;
  }

  .text {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #848484;

    span {
      color: #de5044;
    }
  }

  textarea {
    width: 100%;
    height: 7.1875rem;
    border-radius: 0.3125rem;
    line-height: 1.875rem;
    padding: 0.625rem 1.25rem;
    border: solid 1px #dfdfdf;
  }

  .row > div {
    margin-bottom: 0.9375rem;
  }

  .agree {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #848484;
    margin: 0 0 1.5rem !important;

    input {
      display: inline-block;
      width: 24px;
      height: 24px;
      position: relative;
      top: 0.375rem;
      margin: 0 0.625rem 0 0;
    }

    a {
      color: #4c8bf5;
    }
  }

  button {
    width: 10.1875rem;
    height: 3.25rem;
    background-color: #4c8bf5;
    border-radius: 1.875rem;
    text-align: center;
    line-height: 3.25rem;
    margin-right: 1.5625rem;
    border: none;
    color: #fff;
  }

  button.quxiao {
    background-color: #c4c4c4;
  }.quxiao2:hover {
  background: #909399 !important;
    border-color: #909399 !important;
  }

  button:hover {
    background: #de5044;
  }
}
.shenqing.more,
.canyu.more {
  margin-right: 1.25rem;
}
.shoucang {
  display: inline-block;
  background-color: #de5044;
  border-color: #de5044;

  i {
    font-size: 1rem;
    color: #fff;
    margin-right: 0.4375rem;
  }

  a {
    color: #fff;
  }
}

.shoucang:hover {
  background-color: #fff;

  a,
  i {
    color: #de5044;
  }
}
.join_active,
.zgfangshi {
  .radio {
    margin: 0.5rem;
  }

  .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  .radio input[type="radio"] + .radio-label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #dfdfdf;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: 0;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
  }

  .radio input[type="radio"]:checked + .radio-label:before {
    background-color: #4c8bf5;
    box-shadow: inset 0 0 0 4px #f4f4f4;
  }

  .radio input[type="radio"]:focus + .radio-label:before {
    outline: none;
    border-color: #4c8bf5;
  }

  .radio input[type="radio"]:disabled + .radio-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #dfdfdf;
    background: #dfdfdf;
  }

  .radio input[type="radio"] + .radio-label:empty:before {
    margin-right: 0;
  }
}
.show_team_two {
  padding: 3.125rem 0 3.75rem;
}
.canyuzhe {
  ul {
    margin: 0 -0.9375rem 0;
  }

  ul li {
    width: 20%;
    float: left;
    padding: 0 0.9375rem;
    margin-bottom: 2.125rem;
    position: relative;

    .img {
      div {
        width: 6.75rem;
        height: 6.8125rem;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        transform: translateX(-50%);
      }
    }

    .content {
      box-shadow: 0px 0.3125rem 0.625rem 0px rgba(0, 0, 0, 0.1);
      border-radius: 0.625rem;
      border: solid 1px #dedede;
      padding: 4.375rem 0 1.5625rem;
      margin-top: 3.4375rem;
      overflow: hidden;
    }

    .name {
      font-size: 1.125rem;
      line-height: 1.875rem;
      padding-bottom: 0.25rem;
      position: relative;
      color: #000000;
    }

    .name::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #de5044;
      width: 1.375rem;
      height: 1px;
    }

    .job {
      font-size: 1rem;
      line-height: 1.875rem;
      color: #848484;
    }
  }

  ul li:hover {
    .content {
      box-shadow: 0px 0.3125rem 0.625rem 0px rgba(222, 81, 68, 0.2);
    }
  }
}
.all {
  a {
    color: #848484;
  }
}
.all a:hover {
  color: #de5044;
}
.show_team_three {
  padding: 4.375rem 0;
  .text {
    margin: 0 0 2.5rem;
  }

  .shoucang {
    margin: 0 2.1875rem 0 0;
  }
}
.jiansuo input {
  height: 2.875rem;
  line-height: 2.75rem;
  border-radius: 3px;
  border: solid 1px #e1e1e1;
  width: 25.75rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
}

.jiansuo button {
  width: 4.875rem;
  height: 2.875rem;
  line-height: 2.75rem;
  background-color: #de5044;
  border-radius: 0px 3px 3px 0px;
  text-align: center;
  font-size: 1rem;
  border: 1px solid #de5044;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
}

.jiansuo form {
  display: inline-block;
}

.jiansuo button:hover {
  background: #4c8bf5;
  border-color: #4c8bf5;
}
.story_ul {
  li {
    margin-bottom: 1.6875rem;

    > div {
      border-radius: 0.625rem;
      border: solid 1px #dedede;
      padding: 1.5625rem;
    }

    .left {
      width: 41%;

      .img {
        height: 11.75rem;
        background-size: cover;
        background-position: center center;
        width: 100%;
      }
    }

    .right {
      width: 59%;
      padding-left: 1.875rem;

      .data {
        font-size: 0.875rem;
        line-height: 1.875rem;
        color: #848484;

        .fr {
          i {
            margin-right: 0.5625rem;
            font-size: 0.875rem;
          }
        }
      }

      .name {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 2rem;
        color: #000000;
      }
    }
  }

  li:hover > div {
    box-shadow: 0px 0.4375rem 0.9375rem 0px rgba(0, 0, 0, 0.1);
    border-radius: 0.625rem;
    border: solid 1px #ffce45;

    .name {
      color: #ffce45;
    }
  }
}

.el-cascader {
  width: 100%;
}.address_col3 {
    padding-right: 22px;
}
.el-col-18 {
  padding-left: 7px;
}
@media (max-width: 1366px) {
  .show_team .right .name {
    display: block;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 10px;
  }
}
@media (max-width: 990px) {
  .show_team .right .name {
    margin-top: 15px;
  }
}
@media (max-width: 767px)  {
.show_team {
  padding: 15px 0 25px;
}
.show_team_three {
  padding: 25px 0;
}
}

</style>
<style>
.join_active .el-form-item__content {
   margin-left: 0 !important;
}
</style>
